<template>
  <view class="goods tn-flex-center tn-margin-bottom">
    <view class="wrapper">
      <view class="image">
        <tn-lazy-load
          :src="data.mainImage"
          height="100%"
          img-mode="widthFix"
        ></tn-lazy-load>
      </view>
      <view class="info">
        <view class="title">
          <view class="title-tag">
            <tn-tag
              v-if="data.new"
              size="sm"
              shape="round"
              bg-color="tn-cool-bg-6"
            >
              图鸟趋势
            </tn-tag>
            <tn-tag
              v-else-if="data.type === 1"
              size="sm"
              shape="round"
              bg-color="tn-cool-bg-1"
            >
              自营
            </tn-tag>
          </view>
          <text class="value">{{ data.title }}</text>
        </view>
        <view v-if="data.tags && data.tags.length" class="tags tn-flex">
          <view
            v-for="(tagItem, tagIndex) in data.tags"
            :key="tagIndex"
            class="item"
          >
            <tn-tag
              size="sm"
              shape="round"
              :plain="true"
              :border="true"
              color="tn-color-red"
              border-color="tn-border-red"
              :custom-style="{
                padding: '4rpx 8rpx'
              }"
            >
              {{ tagItem }}
            </tn-tag>
          </view>
        </view>
        <view class="price tn-flex-row-end tn-color-red tn-text-bold">
          <view class="unit">¥</view><view>{{ data.price ? formatPrice(data.price, 2) : '合作送' }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import {} from 'vue'
import {
  GoodsData
} from '../types'

import {
  formatPrice
} from '@/tuniao-ui/utils'

import TnLazyLoad from '@/tuniao-ui/components/tn-lazy-load/src/LazyLoad.vue'
import TnTag from '@/tuniao-ui/components/tn-tag/src/Tag.vue'

/** Props */
type Props = {
  data: GoodsData
}
const props = defineProps<Props>()

</script>

<script lang="ts">
  export default {
    options: {
      // 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现(不会出现shadow节点下再去创建元素)
      virtualHost: true
    }
  }
</script>

<style lang="scss" scoped>
  .goods {
    width: 100%;

    .wrapper {
      width: calc(100% - 20rpx);
      background-color: #FFFFFF;
      border-radius: 20rpx;
      overflow: hidden;
      box-shadow: 1rpx 1rpx 10rpx 6rpx rgba(0, 0, 0, 0.05);
    }

    .image {
      width: 100%;
      border-radius: 20rpx 20rpx 0rpx 0rpx;
      overflow: hidden;
    }

    .info {
      margin-top: 10rpx;
      padding: 10rpx;
      .title {
        text-align: justify;
        vertical-align: middle;
        .title-tag {
          display: inline-block;
        }
        .value {
          margin-left: 6rpx;
        }
      }
    }

    .tags {
      margin: 6rpx 0rpx;
      .item {
        margin-right: 4rpx;
        margin-bottom: 4rpx;
      }
    }

    .price {
      line-height: 1;
      margin-top: 8rpx;
      .unit {
        font-size: 22rpx;
      }
    }
  }
</style>
